Vue Js Div Vertically Scrollable using CSS:To make a div vertically scrollable using CSS in Vue.js, you can use the “overflow-y” property set to “auto” or “scroll”. This property controls whether or not the element should have a vertical scrollbar when the content inside overflows its height.
To implement this, simply add the CSS property “overflow-y: auto;” or “overflow-y: scroll;” to the div element’s style attribute or to an external stylesheet. This will create a vertical scrollbar within the div element and allow users to scroll through the content vertically.
Make sure the height of the div is set to a fixed value or percentage so that the scrollbar appears only when the content exceeds the height of the container.
How can I create a vertically scrollable div in Vue.js using CSS?
The code snippet is implementing a scrollable container(div) in Vue.js to display a list of messages. The container has a fixed height of 200 pixels and is set to scroll when the content exceeds the height.
To make a div vertically scrollable using CSS in Vue.js, you can use the following code
<div id="app">
<div class="scrollable" ref="messages">
<div v-for="message in messages" :key="message.id" class="message">{{ message.text }}</div>
</div>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
messages: [
{ id: 1, text: 'HTML' },
{ id: 2, text: 'CSS' },
],
};
},
});
</script>
<style scoped>
.scrollable {
height: 200px;
overflow-y: scroll;
}
</style>
Output of above example
